<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-emoji"></i> 自定义图标
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <h2>使用方法</h2>
      <p style="line-height: 50px">
        直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{
          iconList.length
        }}个图标）
      </p>
      <p class="example-p">
        <i
          class="el-icon-lx-redpacket_fill"
          style="font-size: 30px; color: #ff5900"
        ></i>
        <span
          >&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span
        >
      </p>
      <p class="example-p">
        <i class="el-icon-lx-weibo" style="font-size: 30px; color: #fd5656"></i>
        <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
      </p>
      <p class="example-p">
        <i
          class="el-icon-lx-emojifill"
          style="font-size: 30px; color: #ffc300"
        ></i>
        <span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
      </p>
      <br />
      <h2>图标</h2>
      <div class="search-box">
        <el-input
          class="search"
          size="large"
          v-model="keyword"
          clearable
          placeholder="请输入图标名称"
        ></el-input>
      </div>
      <ul>
        <li class="icon-li" v-for="(item, index) in list" :key="index">
          <div class="icon-li-content">
            <i :class="`el-icon-lx-${item}`"></i>
            <span>{{ item }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { computed, ref } from "vue";
export default {
  name: "icon",
  setup() {
    const iconList = [
      "attentionforbid",
      "attentionforbidfill",
      "attention",
      "attentionfill",
      "tag",
      "tagfill",
      "people",
      "peoplefill",
      "notice",
      "noticefill",
      "mobile",
      "mobilefill",
      "voice",
      "voicefill",
      "unlock",
      "lock",
      "home",
      "homefill",
      "delete",
      "deletefill",
      "notification",
      "notificationfill",
      "notificationforbidfill",
      "like",
      "likefill",
      "comment",
      "commentfill",
      "camera",
      "camerafill",
      "warn",
      "warnfill",
      "time",
      "timefill",
      "location",
      "locationfill",
      "favor",
      "favorfill",
      "skin",
      "skinfill",
      "news",
      "newsfill",
      "record",
      "recordfill",
      "emoji",
      "emojifill",
      "message",
      "messagefill",
      "goods",
      "goodsfill",
      "crown",
      "crownfill",
      "move",
      "add",
      "hot",
      "hotfill",
      "service",
      "servicefill",
      "present",
      "presentfill",
      "pic",
      "picfill",
      "rank",
      "rankfill",
      "male",
      "female",
      "down",
      "top",
      "recharge",
      "rechargefill",
      "forward",
      "forwardfill",
      "info",
      "infofill",
      "redpacket",
      "redpacket_fill",
      "roundadd",
      "roundaddfill",
      "friendadd",
      "friendaddfill",
      "cart",
      "cartfill",
      "more",
      "moreandroid",
      "back",
      "right",
      "shop",
      "shopfill",
      "question",
      "questionfill",
      "roundclose",
      "roundclosefill",
      "roundcheck",
      "roundcheckfill",
      "global",
      "mail",
      "punch",
      "exit",
      "upload",
      "read",
      "file",
      "link",
      "full",
      "group",
      "friend",
      "profile",
      "addressbook",
      "calendar",
      "text",
      "copy",
      "share",
      "wifi",
      "vipcard",
      "weibo",
      "remind",
      "refresh",
      "filter",
      "settings",
      "scan",
      "qrcode",
      "cascades",
      "apps",
      "sort",
      "searchlist",
      "search",
      "edit",
    ];
    const keyword = ref("");
    const list = computed(() => {
      return iconList.filter((item) => {
        return item.indexOf(keyword.value) !== -1;
      });
    });

    return {
      iconList,
      keyword,
      list,
    };
  },
};
</script>

<style scoped>
.example-p {
  height: 45px;
  display: flex;
  align-items: center;
}
.search-box {
  text-align: center;
  margin-top: 10px;
}
.search {
  width: 300px;
}
ul,
li {
  list-style: none;
}
.icon-li {
  display: inline-block;
  padding: 10px;
  width: 120px;
  height: 120px;
}
.icon-li-content {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-li-content i {
  font-size: 36px;
  color: #606266;
}
.icon-li-content span {
  margin-top: 10px;
  color: #787878;
}
</style>
